<template>
  <el-menu-item
    v-if="!route.children && route.meta.icon"
    style="min-width: 100%"
    :index="basePath"
  >
    <nav-link :path="basePath">
      <item :icon="route.meta.icon" :title="route.meta.title" />
    </nav-link>
  </el-menu-item>
  <el-submenu
    v-else-if="route.meta.icon"
    ref="submenu"
    :index="basePath"
    popper-append-to-body
  >
    <template #title>
      <router-link
        :to="basePath"
        :style="{
          color: activeRoute === basePath ? textColor.active : textColor.normal,
          'margin-right': '5px'
        }"
      >
        <item :icon="route.meta.icon" :title="route.meta.title" />
      </router-link>
    </template>
    <sidebar-item
      v-for="child in route.children"
      :key="child.path"
      :route="child"
      :basePath="resolvePath(child.path)"
    />
  </el-submenu>
</template>

<script lang="ts">
import { defineComponent, PropType, inject } from 'vue'
import { RouteRecordRaw } from 'vue-router'
import NavLink from './Link.vue'
import Item from './Item.vue'

export default defineComponent({
  components: {
    NavLink,
    Item
  },
  props: {
    basePath: {
      type: String as PropType<string>,
      required: true
    },
    route: {
      type: Object as PropType<RouteRecordRaw>,
      required: true
    }
  },
  setup(props) {
    console.log(props.basePath)
    const textColor = inject('textColor')
    const activeRoute = inject('activeRoute')
    const resolvePath = (next: string): string => {
      return props.basePath + '/' + next
    }
    return { textColor, activeRoute, resolvePath }
  }
})
</script>
